<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>角色列表</title>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
		<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>

		<div id="details" style="display: none;">
			<form id="ff" class="layui-form" action="" lay-filter="ff">
				<input type="hidden" name="token" value="231649c6-3627-4a7c-b1e0-20da6cad93d6" />
				<div class="layui-form-item">
					<label class="layui-form-label">角色名</label>
					<div class="layui-input-inline">
						<input type="text" id="Name" name="Name" required lay-verify="required" placeholder="请输入角色名" autocomplete="off"
						 class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</form>
		</div>
		<table id="tt" lay-filter="test"></table>

		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs" lay-event="detail">设置</a>
		  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>

		<script>
			layui.use(['table', 'jquery', 'form', 'tree'], function() {
				var table = layui.table;
				var $ = layui.jquery;
				var form = layui.form;
				var tree = layui.tree;
				var index = null;

				//第一个实例
				table.render({
					elem: '#tt',
					height: 312,
					url: 'http://stuapi.ysd3g.com/api/GetRolesLayUI' //数据接口
						,
					method: 'post' //设置请求类型
						,
					limit: 5,
					limits: [5, 10, 15, 20],
					where: { //请求参数
						token: '231649c6-3627-4a7c-b1e0-20da6cad93d6'
					},
					page: true //开启分页
						,
					cols: [
						[ //表头
							{
								field: 'Id',
								title: '角色id',
								sort: true,
								fixed: 'left'
							}, {
								field: 'Name',
								title: '角色名称'
							}, {
								fixed: 'right',
								width: 200,
								align: 'center',
								toolbar: '#barDemo'
							}
						]
					]
				});


				//监听工具条
				table.on('tool(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
					var data = obj.data; //获得当前行数据
					var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
					var tr = obj.tr; //获得当前行 tr 的DOM对象

					if (layEvent === 'detail') { //设置
						//do somehing
						//layer.msg('你点击了查看按钮');
						$.post(
							'http://stuapi.ysd3g.com/api/GetModulesByRoleIdLayUI', {
								roleId:data.Id,
								token: '231649c6-3627-4a7c-b1e0-20da6cad93d6'
							},
							function(res) {
								//渲染
								var inst1 = tree.render({
									elem: '#tree' //绑定元素
										,
									showCheckbox:true,	
									data: res,
									id:'demo'
								});
							}, 'json'
						);
						layer.open({
							type: 1,
							title: '为角色<font color="red">['+data.Name+']</font>设置模块',
							area: ['500px', '400px'],
							content: $('#test1') //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
						});
					} else if (layEvent === 'del') { //删除
						layer.confirm('真的删除行么', function(index) {
							obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
							layer.close(index);
							//向服务端发送删除指令
							$.post(
								'http://stuapi.ysd3g.com/api/DeleteRole', {
									roleId: data.Id,
									token: '231649c6-3627-4a7c-b1e0-20da6cad93d6'
								},
								function(res) {
									layer.msg(res);
								}
							);
						});
					} else if (layEvent === 'edit') { //编辑
						//do something
						index = layer.open({
							type: 1,
							title: '修改信息',
							area: ['500px', '400px'],
							content: $('#details') //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
						});
						form.val('ff', data);
					}
				});
				//监听提交
				form.on('submit(formDemo)', function(data) {

					$.post(
						'http://stuapi.ysd3g.com/api/UpdateUser' //请求地址
						, $('form').serialize(),
						function(res) { //回调函数
							layer.msg(res);
							layer.close(index);
						}
					);
					return false; //阻止表单提交
				});
			});
		</script>
	</body>
	<div id="test1" style="display: none;">
			<div id="tree"></div>
			<button class="layui-btn" onclick="setModules()">确定</button>
	</div>
	<script type="text/javascript">
		function setModules(){
			//获取用户选中的所有模块的id
			var parentIds='';
			layui.use('tree',function(){
				var tree = layui.tree;
				//获得选中的节点
				var checkData = tree.getChecked('demo');
				console.log(checkData);
				for(var i = 0;i<checkData.length;i++){
					for(var j = 0;j<checkData[i].children.length;j++){
						//console.log(checkData[i].children[j].id);
						parentIds+=checkData[i].children[j].id+',';
					}
				}
				//console.log(parentIds);
			});
			
		}
	</script>
</html>
